$popUpsMargin-top:9.7vh;
$popUpsMargin-left:9.5vw;
$popUpsWidthAll:90.5vw;
$popupWidth:0.966;
$listHeight:90.3vh;
$listTitleHeight:6.3vh;
$toolMargin-top:4.8vh;
$listMargin-top:10.6vh;
$popUpsLiMargin-left:5%;
$popUpsLiHeight:3.8vh;
$popUpsLiWidth:10vw;
$popUpsButtonHeight:3vh;
$popUpsButtonWidth:9.5vh;
$popUpsButtonBackground-color:#497ea2;
$popUpsButtonHoverBackground-color:#639dc5;
$color:#FFF;
$mainTableTitleHeight:3vh;
$mainTableListHeight:2.6vh;
$footHeight:3.8vh;
.modal{
  width:$popUpsWidthAll;
  height: 85.9%;
  margin-top:$popUpsMargin-top ;
  left:$popUpsMargin-left !important;
  position: absolute !important;
  overflow-y: hidden !important;
  .modal-dialog{
    margin: 0 auto;
    .modal-content{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
  .modal-50{
    width: 50vw;
    border: none;
    height: ($listHeight+-1*$footHeight)/2;
    top:20%;

    .border-red-an{
      animation: borderAN 1s;
      border-color:red;
    }
    @keyframes borderAN{
      0% {border-color:#ddd;}
      25% {border-color:red;}
      50% {border-color:#ddd;}
      75% {border-color:red;}
      100% {border-color:#ddd;}
    }
    .main-form{
      .warn-icon:before{
        content:'*';
        width: 4.5%;
        float: left;
        opacity: 1;
        color: red;
      }
      li{
        &:before{
          content:'*';
          width: 4.5%;
          opacity: 0;
          float: left;
          color: red;
        }
      }
    }
  }
  .modal-20{
    width: 25vw;
    height: 15vh;
    border: none;
    top: 30%;
    .form-box{
      height: 11.15vh;
      display: inline-block;
      .text{
        width: 96%;
        margin: 1.5% auto 7%;
      }
    }
  }
  .operation-form-box{
    width: 100%;
    height: 100%;
    .title{
      font-size: 1.4rem;
      width: 100%;
      text-align: left;
      top: 0;
      margin-top: 0 !important;
      background-color: #497ea2 !important;
      color: #fff;
      height: 3.5vh !important;
      line-height:  3.5vh;
      text-indent:2%;
      position: absolute;
      border: none;
      border-radius: 0;
    }
    .close-btn{
      position: absolute;
      cursor: pointer;
      right: 2%;
      width: $popUpsLiHeight*0.36;
      height:$popUpsLiHeight*0.36;
      transform: translate(50%, 50%);
      top: 0;
    }
  }
  .form-box{
    height: ($listHeight+-1*$footHeight)/2-$popUpsLiHeight*3/4;
    width: 100%;
    margin: 3.5vh 0 0;
  }
  .main-form{
    position: relative;
    margin:  0 3%;
    padding:  0;
    width: 94%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    flex-wrap: wrap;
    .tree-bar{
      width:57%;
      position: relative;
      >input{
        border-radius: 3px;
        border: 1px solid #ddd;
        height: 3.8vh;
        width: 100%;
        padding-left: 2%;
        margin-left: 1%;
        font-size: 1rem;
      }
      .tree-list{
        .sel-this-tree span{
          color:#33cbcc;
        }
        .tree-title{
          &:hover span{
            color:#497ea2;
          }
          cursor: pointer;
          a{
            width:21px;
            height:21px;
            background-image: url('../images/tree2.png');
            background-repeat: no-repeat;
            background-position: -126px 0;
            display: inline-block;
            float: left;
          }
          .has-node{
            background-position: -105px 0px;
          }
          span{
            line-height:21px;
            display: inline-block;
          }
        }

        overflow: auto;
        position: absolute;
        left:0;
        top:100%;
        width:100%;
        height:10vw;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
      }
    }
    >li{
      height: $popUpsLiHeight;
      background-color: transparent !important;
      float:left;
      width:31.5%;
      margin:0 0 2%;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content:space-between;
      flex-wrap: wrap;
      >span{
        font-size: 1.0rem;
        color: #497ea2;
        float: left;
        line-height: $popUpsLiHeight;
        width: 1.5%;
        height: $popUpsLiHeight;
        &:first-child{
          width: 36%;
          text-align: justify;
          display: block;
          &:after{
            content: '';
            width: 100%;
            display: inline-block;
          }
        }
      }
      >input,textarea{
        border-radius: 3px;
        border: 1px solid #ddd;
        height: $popUpsLiHeight;
        width: 56%;
        padding-left: $popUpsLiMargin-left/2.5;
        margin-left: 1%;
        font-size: 1rem;
      }
      textarea{
        max-width: 77%;
        max-height: 11.3vh;
        width: 77%;
        height: 11.3vh;
        margin-left: 3%;
        padding-top: 2%;
        font-size: 1rem;
      }
      select{
        width: 56%;
        height: 3.8vh;
        border-color: #ddd;
        margin-left: 1%;
        cursor: pointer;
        font-size: 1rem;
      }
      &:last-child{
        margin-bottom: 1.5%;
        height: auto;
      }
      .pic{
        display: inline-block;
        &:before{
          width: 31.5%;
        }
      }
      .pic_add{
        #assetPicPre{
          line-height: $popUpsLiHeight;
          img{
            width: 56%;
            height: 11.3vh;
            float: left;
            margin-left: 2%;
          }
          .add-img{
            cursor: pointer;
            border: 1px solid #dddddd;
          }
          /*span{
            width: 63%;
            height: 11.3vh;
          }*/
        }
      }
      .input-group{
        width: 56%;
       input{
         height: 3.8vh;
         padding: 0 0 0 4%;
         margin: 0;
         border-radius: 0;
         font-size: 1rem;
         width: 100%;
       }
        .input-group-btn{
          button{
            height: 3.8vh;
            border-radius: 0;
          }
        }
      }
    }
    .form-title{
      float: none;
      width: 90%;
      display: inline-block;
      margin: 1.5% 0 0.5%;
      &:before{
        width: 0% !important;
      }
      >span{
        color: #333;
        &:first-child{
          text-align: left;
          width: auto;
        }

      }
    }
    .note{
      width: 68%;
      margin: 0 !important;
      height: 11.3vh;
      display: inline-block;
      &:before{
        width: 2.25% !important;
      }
      >span{
        &:first-child{
          width: 13.5%;
        }
      }
      input{
        width: 80%;
        height: 16.3vh;
      }
    }
    .pic{
      display: inline-block;
    }
  }
  .main-table{
    width:94%;
    margin:0 3% $popUpsLiMargin-left/5;
    padding: 0;
    position: relative;
    li{
      &:first-child{
        height: $mainTableTitleHeight;
        line-height: $mainTableTitleHeight;
      }
      .list-box{
        position: relative;
        border-bottom:2px solid $popUpsButtonBackground-color;
        .title{
          position: absolute;
          top: 0;
          height: $mainTableTitleHeight;
          line-height: $mainTableTitleHeight;
          width: 100%;
          li{
            float: left;
            height: $mainTableTitleHeight*0.8;
            margin-top:$mainTableTitleHeight*0.1 ;
            font-size:1.2rem;
            color: $color;
            line-height:$mainTableTitleHeight*0.8;
            border-right:1px solid #cfe0eb ;
            text-align: center;
            text-indent: 0;
            &:nth-child(1){
              width: 5%;
            }
          }
        }
        .main{
          position: absolute;
          margin-top: $mainTableTitleHeight;
          width:100% ;
          height:7*$mainTableListHeight;
          li{
            height: $mainTableListHeight;
            line-height: $mainTableListHeight;
            overflow: hidden;
            border-bottom:1px solid #cfe0eb ;
            &:nth-child(odd){
              background-color: #f2faff;
            }
            .list-table{
              height: $mainTableListHeight;
              width: 100%;
              li{
                float: left;
                background-color: transparent;
                border-right: 1px solid #cfe0eb;
                &:nth-child(1){
                  width: 5%;
                }
                &:last-child{
                  border-right: none;
                }
              }
            }
          }
        }
      }
    }
    .title{
      position: relative;
      text-indent: 0;
      li{
        float: left;
        text-align: center;
        color: #fff;
        &:first-child{
          width: 10%;
          line-height: 3.5vh;
          height: 3.5vh;
        }
      }
    }
    .main{
      >li{
        float: left;
        width: 100%;
        .list-table{
          width: 100%;
          &:nth-child(odd){
            background-color: #f2faff;
          }
          li{
            float: left;
            text-align: center;
            &:first-child{
              width: 10%;
            }
            input{
            }
          }
        }
      }
    }
  }
  .btn-box{
    width: 90%;
    height: 5.5vh;
    margin: 0 auto 1vh;
    position: relative;
    li{
      width: 5vw;
      height: 3.5vh;
      display: inline-block;
      line-height: 3.5vh;
      border-radius: 0.5vh;
      margin: 0;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-padding-start: 0;
      position: absolute;
      &:last-child{
        margin-left: 3vw;
        margin-right: 0;
        right: 0 !important;
      }
      &:first-child{
        right:8vw ;
      }
      .button{
        color: $color;
        width: 100%;
        height:100%;
        background-color:$popUpsButtonBackground-color ;
        text-align: center;
        cursor: pointer;
      }
      &:hover{
        .button{
          background-color: $popUpsButtonHoverBackground-color;
        }
      }
      &:active{
        background-color: #def4b0;
        color: $popUpsButtonBackground-color;
      }
    }
  }


}
.modal-lineHeight{
  .modal-50{
    .main-form{
      margin-top: 3%;
      li{
        margin-bottom: 4%;
      }
    }
  }
  .main-table{
    margin-bottom: 3%;
  }
}
.modal-backdrop{
  width:$popUpsWidthAll;
  height: 85.9%;
  margin-top:$popUpsMargin-top;
  left:$popUpsMargin-left !important;

}
.modal-column{
  .form-box{
      .main-form{
        margin: 1% 3% 3%;
        li{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content:space-between;
          flex-wrap: wrap;
          &:before{
            content: '*';
            width: 2%;
            opacity: 0;
          }
          span{
            &:first-child{
              width: 18%;
            }
            width: 1.5%;
          }
          &:before{
            width: 1.5%;
          }
          &:first-child{
            width: 100%;
            span{
              width: 100%;
              color: #333;
              &:first-child{
                text-align: left;
              }
            }
            &:before{
              width: 0 !important;
            }
          }
          input{
            width: 78%;
          }
          .input-group{
            width: 78%;
            input{
              margin-left: 0%;
              width: 100%;
            }
          }
          textarea{
            margin-left: 1%;
            width: 78%;
            max-width: 78%;
          }
        }
      }
  }
  .modal-35{
    width: 35vw;
    top: 25%;
    height: 40vh;
  }
}
.modal-column-height-45{
  .modal-35{
    height: 45vh;
  }
}
.modal-column-height-35{
  .modal-35{
    height: 35vh;
  }
}

.modal-red{
  .modal-dialog{
    .modal-content{
      border: 1px solid red;
      .operation-form-box{
        .title{
          background-color: red!important;
        }
        .content{
          position: absolute;
          top: 3vh;
        }
      }
    }
  }
}
.dropdown-menu{
   min-width: auto;
   padding: 0 !important;
  margin: 0;
 background-clip: padding-box;
 border: none;
 border-radius: 0;
  width: auto;
  height: auto;
  li{
    position: relative;
    table{
      position: absolute;
      top: 0;
      background-color: #fff;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-padding-start: 0;
    }
  }
}




